<template>
  <div class="tab-bar">
    <div class="tabs">
      <div 
        class="tab" 
        :class="activeTabIndex == index ? 'active' : ''"
        @click="handleTabClick(index)"
        v-for="(item, index) in tabNames" :key="item.id">
        {{item.name}}
        <em class="underline" v-show="activeTabIndex == index"></em>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabNames: {
      type: Array, 
      default: function() {
        return [
          {
            id: 1,
            name: '号码'
          },
          {
            id: 2,
            name: '双面'
          },
          {
            id: 3,
            name: '长龙'
          },
          {
            id: 4,
            name: '分部'
          },
          {
            id: 5,
            name: '走势'
          },
        ]
      }
    }
  },
  
  data() {
    return {
      // tabNames: [
      //   {
      //     id: 1,
      //     name: '号码'
      //   },
      //   {
      //     id: 2,
      //     name: '双面'
      //   },
      //   {
      //     id: 3,
      //     name: '长龙'
      //   },
      //   {
      //     id: 4,
      //     name: '分部'
      //   },
      //   {
      //     id: 5,
      //     name: '走势'
      //   },
      // ],
      activeTabIndex: 0
    }
  },
  methods: {
    handleTabClick(index) {
      this.activeTabIndex = index 
      this.$emit('click', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  .tab-bar  

    .tabs 
      display flex 
      justify-content space-around
      .tab 
        position relative 
        extend-click()
        font-weight 700
        &.active 
          color $color-theme-red 
        .underline 
          position absolute 
          width 12px 
          height 3px 
          border-radius 2px
          background $color-theme-red 
          bottom -12px 
          left 50%
          transform translateX(-50%)
          z-index 0
     
      

</style>